<template>
  <selectFarmType @farmtypemessage="getfarmtypemessage">
    <div slot="farmtypemain" class="farmtypemain-view">
      <div class="add-base-box">
        <div class="selected-main-line2">
          <div class="selected-main-line2-but" @click="isshowaddtitle = true">新建模板</div>
        </div>
      </div>
      <div v-for="(item, index) in selectList" :key="index" class="base-box" @mouseenter="setid(item.templateId)">
        <div v-if="nowselectid === item.templateId" class="selected-main">
          <div class="selected-main-line1">{{ item.templateName }}</div>
          <div class="selected-main-line2">
            <div class="selected-main-line2-but" @click="editscreenMet(item)">修改模板</div>
          </div>
        </div>
        <div v-else class="base-box-title">{{ item.templateName }}</div>
      </div>
      <!-- 添加弹框-选择完大屏名称跳转至具体配置 -->
      <div v-if="isshowaddtitle" class="add-screen-dia">
        <div class="top-bar"></div>
        <div class="top-title-line">
          <div class="line-title">新建模板</div>
          <div class="line-close" @click="allclickmet(0)">
            <i class="el-icon-close"></i>
          </div>
        </div>
        <div class="screen-dia-main">
          <div class="dia-main-inputline">
            <div class="inputline-name">名称</div>
            <input v-model="addscreentitle" class="inputline-value" />
          </div>
          <div class="dia-main-inputline">
            <div class="inputline-name">说明</div>
            <input v-model="remark" class="inputline-value" />
          </div>
          <div class="dia-main-inputline">
            <div class="inputline-name">模板编码</div>
            <input v-model="templateCode" class="inputline-value" />
          </div>
          <div class="dia-main-inputline">
            <div class="inputline-name">页眉页脚样式</div>
            <select v-model="showType" class="inputline-value">
              <option v-for="(item, index) in showTypeArr" :key="index" :value="item.id">
                {{ item.name }}
              </option>
            </select>
          </div>
          <div class="dia-main-inputline">
            <div class="inputline-name">整体色系</div>
            <select v-model="colorMatching" class="inputline-value">
              <option v-for="(item, index) in colorMatchingArr" :key="index" :value="item.id">
                {{ item.name }}
              </option>
            </select>
          </div>
        </div>
        <div class="bottom-bar">
          <div class="bottom-bar-cancel" @click="allclickmet(0)">取消</div>
          <div class="bottom-bar-confirm" @click="allclickmet(1)">确认</div>
        </div>
      </div>
    </div>
  </selectFarmType>
</template>
<script>
import selectFarmType from "@/components/selectFarmType/index.vue";
import axios from "axios";
export default {
  components: { selectFarmType },
  data() {
    return {
      selectList: [
        // { templateName: "模板1号", templateId: 1 },
        // { templateName: "模板2号", templateId: 2 },
        // { templateName: "模板3号", templateId: 3 },
        // { templateName: "模板4号", templateId: 4 },
        // { templateName: "模板5号", templateId: 5 },
        // { templateName: "模板6号", templateId: 6 }
      ],
      colorMatchingArr: [
        { name: '绿色', id: 'green' },
        { name: '蓝色', id: 'blue' },
        { name: '蓝绿色', id: 'blue-green' },
        { name: '亮绿色', id: 'brilliantgreen' }
      ],
      showTypeArr: [
        { name: '模板1号', id: 'templeone' },
        { name: '模板2号', id: 'templetwo' },
        { name: '模板3号', id: 'templethree' },
        { name: '模板4号', id: 'templefour' },
        { name: '模板5号', id: 'templefive' },
        { name: '模板6号', id: 'templesix' },
        { name: '模板7号', id: 'templeseven' },
        { name: '模板8号', id: 'templeeight' },
        { name: '模板9号', id: 'templenine' }
      ],
      nowselectid: 1,
      farmtypemessage: { description: "大田种植", farmingTypeId: 1 },
      isshowaddtitle: false,
      addscreentitle: "",
      templateCode: "",
      showType: 'templeone',
      remark: "",
      colorMatching: 'green'
    };
  },
  mounted() {
    this.getalltemlist();
  },
  methods: {
    // 总体点击公用方法
    allclickmet(i) {
      if (i >= 0) {
        if (i === 0) {
          this.isshowaddtitle = false;
        }
        if (i === 1) {
          if (this.addscreentitle && this.templateCode) {
            this.isshowaddtitle = false;
            this.addscreenMet();
          } else {
            this.$message.warning("请将数据填写完整！");
          }
        }
      } else {
        this.$message.warning("传值错误！");
      }
    },
    // 获取所有模板
    getalltemlist() {
      let baseurl = this.$zhurl;
      let requrl = baseurl + "/template/queryTemplateList";
      axios({
        method: "GET",
        url: requrl
      }).then((response) => {
        let mes = response.data.data;
        if (mes) {
          this.selectList = mes;
        }
      });
    },
    // 添加模板
    addscreenMet() {
      let param = {
        // 配色方案
        colorMatching: this.colorMatching,
        // 农业类型id
        farmingTypeNo: this.farmtypemessage.farmingTypeId,
        // 模板说明
        remark: this.remark,
        // 模板编码
        templateCode: this.templateCode,
        // 模板页眉页脚样式
        showType: this.showType,
        // "templateId": 0,
        // "templateIdList": [],
        // 模板名称
        templateName: this.addscreentitle
      };
      // 使用公共url替换
      let baseurl = this.$zhurl;
      let requrl = baseurl + "/template/createTemplate";
      axios({
        method: "POST",
        url: requrl,
        data: param
      }).then((response) => {
        console.log(response);
        if (response.data.code === 1) {
          console.log("添加成功返回数据", response.data.data);
          this.$store.dispatch("tagsView/delView", this.$route).then(() => {
            this.$message.success("新建大屏成功，即将跳转配置页面");
            setTimeout(() => {
              if (response.data.data) {
                this.$router.push({
                  name: "configTemple",
                  query: response.data.data
                });
              } else {
                this.$message.error("获取返回数据失败！");
              }
            }, 1000);
          });
        } else {
          if (response.data.msg) {
            this.$message.error(response.data.msg);
          } else {
            this.$message.error("添加失败！");
          }
        }
      });
    },
    // 修改大屏
    editscreenMet(e) {
      this.$store.dispatch("tagsView/delView", this.$route).then(() => {
        this.$message.success("获取大屏成功，即将跳转配置页面");
        setTimeout(() => {
          if (e) {
            this.$router.push({ name: "configTemple", query: e });
          } else {
            this.$message.error("获取返回数据失败！");
          }
        }, 1000);
      });
    },
    getfarmtypemessage(e) {
      this.farmtypemessage = e;
    },
    setid(id) {
      this.nowselectid = id;
    },
    // 判断是否返回上一步选择基地
    goback() {
      let query = this.$route.query;
      if (query.id && query.id > 0) {
        this.baseid = query.id;
      } else {
        this.$nextTick(() => {
          this.$store.dispatch("tagsView/delView", this.$route).then(() => {
            this.$message.warning("无模板参数id");
            setTimeout(() => {
              this.$router.push({ name: "selectTemple" });
            }, 1000);
          });
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.farmtypemain-view {
  width: 100%;
  // height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

  .add-base-box {
    width: 300px;
    height: 200px;
    margin-bottom: 10px;
    cursor: pointer;
    border: #009fa5 1px solid;
    background-color: #201616;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .selected-main-line2 {
      width: 300px;
      height: 25px;
      display: flex;
      justify-content: center;

      .selected-main-line2-but {
        width: 100px;
        height: 25px;
        line-height: 25px;
        text-align: center;
        background: rgb(32, 22, 22);
        border-radius: 5px;
        color: #00d5cd;
        border: 1px solid #00d5cd;
        font-size: 14px;
        letter-spacing: 2px;
      }

      .selected-main-line2-but:hover {
        background: #00d5cd;
        color: rgb(32, 22, 22);
      }

      .selected-main-line2-but:first-of-type {
        margin-right: 10px;
      }
    }
  }

  .base-box {
    width: 296px;
    height: 200px;
    margin-bottom: 10px;
    cursor: pointer;
    background-image: url("../../../assets/index-bgc.png");
    background-size: cover;
    position: relative;
    border: #009fa5 1px solid;

    .base-box-title {
      width: 296px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      position: absolute;
      bottom: 0;
      left: 0;
      background-color: rgba(23, 24, 24, 0.2);
      letter-spacing: 3px;
      white-space: nowrap;
    }

    .selected-main {
      width: 300px;
      height: 200px;
      position: absolute;
      top: 0;
      left: 0;
      background-color: rgba(23, 24, 24, 0.6);
      background-size: cover;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border: #009fa5 1px solid;

      .selected-main-line1 {
        width: 300px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        letter-spacing: 3px;
        white-space: nowrap;
        font-size: 15px;
      }

      .selected-main-line2 {
        width: 300px;
        height: 25px;
        margin-top: 10px;
        display: flex;
        justify-content: center;

        .selected-main-line2-but {
          width: 100px;
          height: 25px;
          line-height: 25px;
          text-align: center;
          background: rgb(32, 22, 22);
          border-radius: 5px;
          color: #00d5cd;
          border: 1px solid #00d5cd;
          font-size: 14px;
          letter-spacing: 2px;
        }

        .selected-main-line2-but:hover {
          background: #00d5cd;
          color: rgb(32, 22, 22);
        }

        .selected-main-line2-but:first-of-type {
          margin-right: 10px;
        }
      }
    }
  }
}

.add-screen-dia {
  width: 462px;
  // height: 191px;
  background: #303640;
  border: 1px solid #005c6f;
  border-radius: 7px;
  position: fixed;
  top: 35%;
  left: 40%;
  background-color: #005c6f;

  .top-bar {
    width: 460px;
    height: 10px;
    background: linear-gradient(90deg, #3581fb 0%, #00faad 100%);
    border-radius: 7px 7px 0px 0px;
  }

  .top-title-line {
    width: 450px;
    height: 24px;
    line-height: 24px;
    padding: 6px 8px;
    display: flex;
    justify-content: space-between;

    .line-title {
      height: 20px;
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: $textColor;
      letter-spacing: 2px;
    }

    .line-close {
      color: #10d7c4;
      cursor: pointer;
    }

    .line-close:hover {
      color: $textColor;
    }
  }

  .screen-dia-main {
    width: 462px;
    padding: 40px 10px;

    .dia-main-inputline {
      width: 442px;
      // background-color: #00FAAD;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 5px;

      .inputline-name {
        min-width: 120px;
        white-space: nowrap;
        height: 22px;
        font-size: 16px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: $textColor;
        line-height: 24px;
        text-align: center;
      }

      .inputline-value {
        flex: 1;
        height: 32px;
        box-sizing: border-box;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        border: 1px solid #494e57;
        box-sizing: border-box;
        outline: 0;
      }
    }
  }

  .bottom-bar {
    width: 462px;
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 16px;

    .bottom-bar-cancel {
      width: 96px;
      height: 33px;
      border-radius: 5px 5px 5px 5px;
      border: 1px solid #0cb9ae;
      color: #0cb9ae;
      cursor: pointer;
      line-height: 33px;
      text-align: center;
    }

    .bottom-bar-cancel:hover {
      color: #00faad;
    }

    .bottom-bar-confirm {
      width: 96px;
      height: 33px;
      background: #0cb9ae;
      border-radius: 5px 5px 5px 5px;
      cursor: pointer;
      line-height: 33px;
      text-align: center;
    }

    .bottom-bar-confirm:hover {
      color: #10fab4;
    }
  }
}
</style>
